<template>
  <div>
    <div class="mtb20">
      <el-form inline size="medium" class="mtb20" :model="moduleData">
        <el-form-item label="大标题：">
          <el-input v-model="variables.title" placeholder="母婴保健"></el-input>
        </el-form-item>
        <el-form-item label="小标题：">
          <el-input v-model="variables.subTitle" placeholder="Mother&Baby"></el-input>
        </el-form-item>

      <div class="mtb20">
        <el-button type="success" @click="addSecondCategory">添加二级分类</el-button>
        <pcTableAdd :tableData="variables.secondTitleTableData"></pcTableAdd>
      </div>
      <div class="mtb20">
        <pcSinglImageUploadTemplate
          :cmsModuleId="moduleData.cmsModuleId"
          :fileList="variables.bigImgList"
          :MoreMapDialogVisible="MoreMapDialogVisible"
          :moreImagesLabel="moreImagesLabel"
        ></pcSinglImageUploadTemplate>
      </div>
      </el-form>
    </div>

    <div slot="footer" class="dialog-footer">
      <el-button @click="close()" size="mini">取消</el-button>
      <el-button type="primary" @click="saveModuleData" size="mini">确定</el-button>
    </div>

  </div>
</template>
<script>
import pcTableAdd from ".././component/pcTableAdd"; //添加二级分类
import pcSinglImageUploadTemplate from ".././component/pcSinglImageUploadTemplate";
export default {
  name:'pcMainThemeCategory',
  props: {
    //模块Id
    cmsModuleId: {
      type: String
    },

    //模块页面的所有数据
    moduleData: {
      type: Object,
      default: () => {
        return {
        };
      }
    },
    //上传文件的列表
    fileList: {
      type: Array,
      default: () => {
        return []
      }
    },

  },

  components: {
    pcTableAdd,
    pcSinglImageUploadTemplate
  },
  data() {
    return {
      MoreMapDialogVisible: false, //多图弹框是否展示
      moreImagesLabel: {
        name: "上传整行大图",
        btnFlag: true
      },
      variables :{
        title: null,
        subTitle: null,
        secondTitleTableData: [],
        bigImgList: [],
      },

    };
  },

  mounted(){
    //对象当中包含对象,需要JSON解析一下;
    if (this !== null && this.moduleData !== null
      && this.moduleData.variables !== null
      && this.moduleData.variables !== ''
      && this.moduleData.variables !== ""
    ) {
      this.variables = this.moduleData.variables;
    }
  },


  methods: {
    //上传二级目录
    addSecondCategory() {
      this.variables.secondTitleTableData.push({
        name: "",
        imgLink: ""
      });
    },

    handleRemove(file, fileList) {
      console.log(file, fileList);
    },

    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },

    /**
     * 保存模块数据
     */
    saveModuleData(){
      let this_ = this;
      let params = {};
      params.templateDataType = 0;
      params.moduleId = this_.moduleData.cmsModuleId;
      params.platform = 2;

      //图片url转换
      let bigImgList = this_.variables.bigImgList;
      if (bigImgList!=null && bigImgList.length>0){
        bigImgList.forEach(item => {
          item.imgUrl = item.url;
        });
      }else{
        bigImgList = [];
      }

      params.variablesObject = {
        title: this_.variables.title,
        subTitle: this_.variables.subTitle,
        secondTitleTableData: this_.variables.secondTitleTableData,
        bigImgList:this_.variables.bigImgList,
      };
      this_.utils.request.cmsPageModuleAddModuleData(params, res => {
        if (res.code === "0000") {
          this_.$emit('getIndex');
          this_.$message({"message": "保存成功", type: "success"});
        } else {
          this_.variables={};
          this_.$message({"message": res.msg, type: "error"});
        }
      })
    },

    /**
     * 返回上一页
     */
    close(){
      this.$router.push("/Pages/Configuration/IndexShow");
    },





  }
};
</script>
<style lang="scss" scoped>
.mtb20 {
  margin: 20px 0;
  text-align: left;
}
.el-button {
  margin-bottom: 5px;
  text-align: left;
}
.productProduct {
  text-align: left;
}
</style>
